<template>
	<view class="zxc_centent">
		<view style="height:80upx">
		<view class="dc">
			 <u-tabs :list="list1" @click="click" :current="current" :scrollable="false" lineColor="#07c160"></u-tabs>
		</view>
		</view>
		
		
		<!-- 未使用 -->
		<view class="quan_view" v-if="status == 0">
			<view class="quan_list">
				<view class="quan_list_left">
					<view class="quan_list_left_tit">¥120</view>
					<view class="quan_list_left_text">满1299元可用</view>
				</view>
				<view class="quan_list_right">
					<view class="quan_list_right_left">
						<view class="quan_tit">120元现金券</view>
						<view class="quan_text">有效期至：2022-12-23</view>
					</view>
					<view class="quan_list_right_right">
						未使用
					</view>
				</view>
			</view>
			<view class="quan_list">
				<view class="quan_list_left">
					<view class="quan_list_left_tit">¥120</view>
					<view class="quan_list_left_text">满299元可用</view>
				</view>
				<view class="quan_list_right">
					<view class="quan_list_right_left">
						<view class="quan_tit">120元现金券</view>
						<view class="quan_text">有效期至：2022-12-23</view>
					</view>
					<view class="quan_list_right_right">
						未使用
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已使用 -->
		<view class="quan_view" v-if="status == 1">
			<view class="quan_list quan_list_old">
				<view class="quan_list_left">
					<view class="quan_list_left_tit">¥120</view>
					<view class="quan_list_left_text">满299元可用</view>
				</view>
				<view class="quan_list_right">
					<view class="quan_list_right_left">
						<view class="quan_tit">120元现金券</view>
						<view class="quan_text">有效期至：2022-12-23</view>
					</view>
					<view class="quan_list_right_right quan_list_right_right_old">
						已使用
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已过期 -->
		<view class="quan_view" v-if="status == 2">
			<view class="quan_list quan_list_old">
				<view class="quan_list_left">
					<view class="quan_list_left_tit">¥120</view>
					<view class="quan_list_left_text">满299元可用</view>
				</view>
				<view class="quan_list_right">
					<view class="quan_list_right_left">
						<view class="quan_tit">120元现金券</view>
						<view class="quan_text">有效期至：2022-12-23</view>
					</view>
					<view class="quan_list_right_right quan_list_right_right_old">
						已过期
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data (){
			return {
				status:0,
				list1: [{
				                    name: '未使用',
				                }, {
				                    name: '已使用',
				                }, {
				                    name: '已过期'
				                }],
				current:0
			}
		},
		methods:{
			click(item) {
			               console.log('item', item);
						   this.status=item.index;
			           },
		}
	}
</script>

<style>
	.dc{
		background-color: #fff;
		position: fixed;
		left:0;
		top:80upx;
		/* #ifdef APP-PLUS */
		top:0;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top:0;
		/* #endif */
		width: 100%;
		height:100upx;
		z-index: 99;
	}
	.quan_view{
		width:93%;
		margin:0 auto;
	}
	.quan_list{
		height:185upx;
		margin-top:20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: url('/static/images/you_quan.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.quan_list_old{
		background-image: url('/static/images/yong_quan.png');
	}
	.quan_list_left{
		width:32%;
		height:100%;
		color:#fff;
		font-size:24upx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	.quan_list_left_tit{
		font-size:28px;
		margin-top:10upx;
	}
	.quan_list_left_text{
		margin-top:-70upx;
	}
	.quan_list_right{
		width:68%;
		height:100%;
		background-color: #fff;
		border:2upx solid #ededed;
		border-radius: 0 10upx 10upx  0;
		border-left:none;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.quan_list_right_left{
		width:60%;
		font-size:24upx;
		color:#666;
		padding-left:6%;
	}
	.quan_tit{
		color:#000;
		font-size:33upx;
		margin-bottom:10upx;
	}
	.quan_list_right_right{
		color:#11c366;
		border:2upx solid #11c366;
		border-radius: 100upx;
		padding:5upx 40upx;
		font-size:26upx;
		margin-right:20upx;
		white-space: nowrap;
	}
	.quan_list_right_right_old{
		color:#ccc;
		border:2upx solid #ccc;
	}
</style>